<template>
   <div class="tags">
     <el-tag size="medium" closable  :effect="item.isActive?'dark':'plan'" v-for="(item,id) in tags" :key="id">{{item.name}}</el-tag>
   </div>
</template>

<script>

export default {
  name: 'TagsList',
  data(){
    return{
      tags:[{
        name:'首页',
        path:'/home',
        isActive:true
      },
      {
        name:'角色管理',
        path:'/role',
        isActive:false
      },
        {
          name:'用户管理',
          path:'/user',
          isActive:false
        }],
    }
  },
  methods:{
    setTags(data){
      this.tags=data
    },
  },
  watch:{
    $route:{
      immediate: true,
      handler(newValue,oldValue){
        console.log("1==>"+JSON.stringify(newValue));
        console.log("2==>"+JSON.stringify(oldValue));
      }
    }
  },
  mounted() {
    this.$bus.$on('setTags',this.setTags)
  }
}
</script>
<style scoped>
  .tags {
    padding-top: 4px;
    padding-left: 10px;
  }
</style>
